import React, { Component, Fragment } from 'react';
import { List, Button, message, Modal} from 'antd';
import {reqAllMb,reqDeleteMb,reqResizeMbName} from '../../api';
import './data-config.less';
import { connect } from 'react-redux';
import EditMbName from '../Modal/edit-mb-name';
import editIcon from '../../assets/image/edit1.png'
import deleteIcon from '../../assets/image/delete1.png'
class MbMgt extends Component{
  state = {
    mbList:[],
    loading: false,
    visible: false
  };
  formRef = React.createRef();

  getAllMb = async() => {  // 获取所有模板vvvvvvvvvv
    this.setState({loading:true});
    const result = await reqAllMb();
    this.setState({loading:false});
    //console.log("mb11",result);
    if(result.code === 200){
      const mbList = result.data;
      this.setState({
        mbList
      })
    }  
  } 

  
  resizeMbName = async() => {   // 模板 重命名
    this.setState({visible: false})
    const mb_id = this.mb.mb_id;
    const mb_name = this.formRef.current.getFieldValue('mb_name');
    const result = await reqResizeMbName(mb_id,mb_name);
    //console.log("模板重命名",result);
    if(result.code === 200){
      this.getAllMb();
    }else{
      message.error("重命名失败！");
    } 
  }

  handleCancel = () => {
    this.setState({visible: false})
  }
  
  deleteMb = async(item) => {  // 删除模板： 
    const mb_id = item.mb_id
    this.setState({loading:true});
    const result = await reqDeleteMb(mb_id);
    this.setState({loading:false});
    console.log("删除模板",result);
    if(result.code === 200){
      message.success("模板已删除！");
      this.getAllMb();
    }else{
      message.error(result.data);
    } 
  };

  componentDidMount(){
    this.getAllMb();
  }
  render() {
    const {loading, mbList,visible} = this.state;
    const mb = this.mb || ''
    return (
      <Fragment className="mb-mgt-container">
        <List
          className="mb-mgt-wrapper"
          dataSource={mbList}  
          loading={loading}
          renderItem={item => (
            <List.Item className="mb-list-item">
              <div className="show-mbInfo">
                <span className="mb-name" style={{width:150}}>{item.mb_name}</span>
              </div>  
              <div className="show-button">
                <div className="delete-mb-button-new" onClick={() => {
                                                                  this.setState({visible: true});
                                                                  this.mb = item
                                                                }}
                >
                  <img src={editIcon} alt=""></img>
                </div>
                <div style={{width:1,height:18,background:'#07B0FF',margin:'0 20px'}}></div>
                <div className="delete-mb-button-new" onClick={() => this.deleteMb(item)}>
                  <img src={deleteIcon} alt=""></img>
                </div>
              </div>
            </List.Item>
          )}
        />
        <Modal
        className='mb-mgt-dialog'
          title="重命名"
          visible={visible === true}
          onOk={() => this.resizeMbName()}
          onCancel={this.handleCancel}
          okText="确定"
          cancelText="取消"
          destroyOnClose={true}
        >
          <EditMbName 
            mb = {mb}
            setForm = {(formRef) => {this.formRef = formRef}}
          />
        </Modal>
      </Fragment>
      
    )
  }
}

 export default MbMgt;